<?php require __DIR__.'/header.html';?>
<script src="/assets/other/js/jquery.min.js"></script>

<div id="content">

    <header class="site-header">
        <canvas id="d" height="0" style="position: absolute; left: 0px; top: 0px;"></canvas>
        <nav class="navbar navbar-static-top main-navbar" id="top">
            <div class="container">
                <div class="navbar-header">
                    <a href="/" class="navbar-brand brand-dev-api text-hide">&nbsp;</a>
                </div>
                <nav id="bs-navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="../">首页</a></li>
                        <li>
                            <?php if(isset($_SESSION['userinfo']['u_name'])):?>
                            <a href="/user/index.html">个人中心</a>
                            <?php else:?>
                            <a href="/user/login.html">登录</a>
                            <?php endif;?>
                        </li>

                    </ul>
                </nav>
            </div>
        </nav>
        <div class="container jumbotron">
            <div class="row">
                <div class="col-xs-12">
                    <h1>
                        <?php echo $web['title'];?><img src="/assets/tom/images/logo.svg"
                            alt="<?php echo $web['title'];?>" class="hidden">
                    </h1>
                    <p>稳定、快速、免费的 API 接口服务<br>
                        <?php if(isset($list)):?>
                        <span class="package-amount">共收录了
                            <strong>
                                <?php echo count($list);?>
                            </strong>个接口 · 今日调用
                            <?php echo $dayCount['count'];?> 次
                        </span>
                        <?php endif;?>
                    </p>
                    <div class="search-wraper" role="search">
                        <div class="form-group">
                            <input autocapitalize="off" autocomplete="off" autocorrect="off" autofocus=""
                                class="form-control search clearable" id="api-search" placeholder="搜索API名称，例如：二维码、翻译"
                                spellcheck="false" tabindex="0" v-model='search' />
                            <i class="fa fa-search" id="api-search-tu"></i>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </header>


    <div class="container protocal-notice hidden-xs">
        <div class="row">
            <div class="col-xs-12">
                <div class="pull-right">
                    <a href="javascript:void(0)">🔥拒绝流量劫持，全面使用 HTTPS！</a>
                </div>
            </div>
        </div>
    </div>
    <main class="packages-list-container" id="all-packages">
        <div class="container">
            <div class="list-group packages" id="listApi">
                <?php if(!empty($list)):
                    foreach($list as $k=>$v):?>
                <a href="/doc/<?php echo $v['l_alias'];?>.html" class="package list-group-item" target="_blank"
                    alt="<?php echo $v['l_title'];?>">
                    <div class="row">
                        <div class="col-md-3">
                            <h4 class="package-name">
                                <?php echo $v['l_title'];?>
                            </h4>
                        </div>
                        <div class="col-md-9 hidden-xs">
                            <p class="package-description">
                                <?php echo $v['l_desc'];?>
                            </p>
                        </div>
                        <div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12">
                            <span><i class="fa fa-globe"></i>
                                <?php echo $v['l_count'];?>
                            </span>
                        </div>
                    </div>
                </a>
                <?php endforeach;
                    endif;?>
            </div>
            <div class="list-group packages" id="search-results" style="display: none"></div>
        </div>
    </main>

</div>

<script src="/assets/tom/js/bootstrap.min.js"></script>
<script src="/assets/tom/js/catebg.js"></script>

<script>
    // 是否搜索
    var isSearch = true;
    // 监听输入
    $("#api-search").bind("input propertychange", function (event) {
        clearTimeout(isSearch);
        deldsq()
    });

    // 定时器
    function deldsq() {
        isSearch = setTimeout(function () {
            var search = $("#api-search").val();
            if (search != '') {
                $("#listApi").load("/v1/apilist?search=" + search.trim(), function (responseTxt, statusTxt, xhr) {
                    if (statusTxt == "success") { console.log(0) }
                    if (statusTxt == "error") { console.log(1) }
                });
            } else {
                $("#listApi").load("/v1/apilist", function (responseTxt, statusTxt, xhr) {
                    if (statusTxt == "success") { console.log(0) }
                    if (statusTxt == "error") { console.log(1) }
                });
            }
        }, 500);
    }

    $(function () {
        // 回车事件
        $("body").bind('keyup', function (event) {
            if (event.keyCode == 13) {
                var search = $("#api-search").val();
                if (search != '') {
                    $("#listApi").load("/v1/apilist?search=" + search.trim(), function (responseTxt, statusTxt, xhr) {
                        console.log(123);
                        if (statusTxt == "success") { console.log(0) }
                        if (statusTxt == "error") { console.log(1) }
                    });
                }
            }
        });
    });

    function toThousands() { }

</script>
<?php require __DIR__.'/footer.html';?>